<template>
	<div class="content">
		<div class="input size">
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="4" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户ID" :label-width="formLabelWidth">
							<el-input v-model="extensionDataParamSpecial.id" autocomplete="off" placeholder="请输入内容" style="width: 100%;" ></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="4" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户邮箱" :label-width="formLabelWidth">
							<el-input v-model="extensionDataParamSpecial.email" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="4" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户昵称" :label-width="formLabelWidth">
							<el-input v-model="extensionDataParamSpecial.nickname" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="4" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="推广码" :label-width="formLabelWidth">
							<el-input v-model="extensionDataParamSpecial.code" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="2" class="inpt_in">
					<el-button style="width:80%;" type="primary" @click="SpecialSearch">搜索</el-button>
				</el-col>
				<el-col :span="2" class="inpt_in">
					<el-button style="width: 90%" @click="openInsertUser()">添加</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="boder">
			<el-row>
				<el-table :data="ylTablData" border style="width: 100%" :header-cell-style="{'text-align':'center','color':'rgba(0,0,0,0.85)'}"
				 stripe>
					<el-table-column prop="id" label="用户ID" width="150" align="center">
					</el-table-column>
					<el-table-column prop="email" label="用户邮箱" width="150" align="center">
					</el-table-column>
					<el-table-column prop="nickname" label="用户昵称" width="150" align="center">
					</el-table-column>
					<el-table-column prop="code" label="推广码" width="150" align="center">
					</el-table-column>
					<el-table-column prop="winProbability" label="出货率" width="150" align="center">
					</el-table-column>
					<el-table-column prop="valueOpenCallback" label="开箱已取回" width="150" align="center">
					</el-table-column>
					<el-table-column prop="valueMallCallback" label="商城已取回" width="150" align="center">
					</el-table-column>
					<el-table-column prop="balance" label="可用余额" width="150" align="center">
					</el-table-column>
					<el-table-column label="操作" width="300" align="center">
						<template slot-scope="scope">
							<!-- <el-button type="text" size="small" @click="">权限</el-button>
							<el-button type="text" size="small" @click="">详情</el-button> -->
							<el-button type="text" size="small" @click="openJiajiankuanDialog(scope.row)">加减款</el-button>
							<el-button type="text" size="small" @click="frozenUser(scope.row)">冻结</el-button>
							<el-button type="text" size="small" @click="openChangePwdDialog(scope.row)">修改密码</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="updatedAdminId" label="操作人" width="150" align="center">
					</el-table-column>
				</el-table>
			</el-row>
			<el-pagination background layout="prev, pager, next,total" :page-count="extensionDataParamSpecial.pageCount" @current-change="handleCurrent">
			</el-pagination>


			<el-dialog title="添加用户" :visible.sync="insertUserDialog" top="5vh" @close="closeInsertUserDialog()">
				<el-row class="demo-autocomplete">
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="邮箱" :label-width="formLabelWidth">
								<el-input v-model="insertUserDataParam.email" autocomplete="off" placeholder="邮箱" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="登录密码" :label-width="formLabelWidth">
								<el-input v-model="insertUserDataParam.login_pwd" autocomplete="off" placeholder="登录密码" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="推广码" :label-width="formLabelWidth">
								<el-input v-model="insertUserDataParam.code" autocomplete="off" placeholder="推广码" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="昵称" :label-width="formLabelWidth">
								<el-input v-model="insertUserDataParam.nickname" autocomplete="off" placeholder="昵称" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="备注" :label-width="formLabelWidth">
								<el-input v-model="insertUserDataParam.remark_admin" autocomplete="off" placeholder="备注" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="上传图片" :label-width="formLabelWidth">
								<el-upload class="avatar-uploader"
									v-bind:action="imgUpload"
									:show-file-list="false"
									:on-success="handleAvatarSuccess"
									name="file">
									<img v-if="imageUrl" :src="imageUrl" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<div style="margin-top: 10vh;">
					<div slot="footer" class="dialog-footer" style="margin-left: 75%;width: 200px;">
						<el-button @click="closeInsertUserDialog()">取 消</el-button>
						<el-button type="primary" @click="submitInsertUserData()">确 定</el-button>
					</div>
				</div>
			</el-dialog>

			<el-dialog title="用户加减款" :visible.sync="jiajiankuanDialog" top="5vh" @close="closeJiajiankuanDialog()">
				<el-row class="demo-autocomplete">
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="用户邮箱" :label-width="formLabelWidth">
								<el-input v-model="jiajiankuanUserDataParam.email" autocomplete="off" placeholder="用户邮箱" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="用户ID" :label-width="formLabelWidth">
								<el-input v-model="jiajiankuanUserDataParam.id" autocomplete="off" placeholder="用户ID" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="推广码" :label-width="formLabelWidth">
								<el-input v-model="jiajiankuanUserDataParam.code" autocomplete="off" placeholder="推广码" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="调整金额" :label-width="formLabelWidth">
								<el-input v-model="jiajiankuanUserDataParam.money" autocomplete="off" placeholder="以-号或者+号开头" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="备注" :label-width="formLabelWidth">
								<el-input v-model="jiajiankuanUserDataParam.msg" autocomplete="off" placeholder="备注" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<div style="margin-top: 10vh;">
					<div slot="footer" class="dialog-footer" style="margin-left: 75%;width: 200px;">
						<el-button @click="closeJiajiankuanDialog()">取 消</el-button>
						<el-button type="primary" @click="submitJiaJianKuanUserData()">确 定</el-button>
					</div>
				</div>
			</el-dialog>

			<el-dialog title="修改密码" :visible.sync="ChangePwdDialog" top="5vh" @close="closeChangePwdDialog()">
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="用户ID" :label-width="formLabelWidth">
								<el-input v-model="ChangePwdUserDataParam.useId" autocomplete="off" placeholder="用户ID" style="width: 100%;" disabled=""></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="用户邮箱" :label-width="formLabelWidth">
								<el-input v-model="ChangePwdUserDataParam.email" autocomplete="off" placeholder="用户邮箱" style="width: 100%;" disabled=""></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="昵称" :label-width="formLabelWidth">
								<el-input v-model="ChangePwdUserDataParam.nickname" autocomplete="off" placeholder="昵称" style="width: 100%;" disabled=""></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="修改密码" :label-width="formLabelWidth">
								<el-input v-model="ChangePwdUserDataParam.loginPwdBak1" autocomplete="off" placeholder="修改密码" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row class="demo-autocomplete">
					<!-- style="align-items: flex-end" -->
					<el-col :span="17" class="inpt_in">
						<el-form class="demo-form-inline">
							<el-form-item label="确认密码" :label-width="formLabelWidth">
								<el-input v-model="ChangePwdUserDataParam.loginPwdBak2" autocomplete="off" placeholder="确认密码" style="width: 100%;"></el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<div style="margin-top: 10vh;">
					<div slot="footer" class="dialog-footer" style="margin-left: 75%;width: 200px;">
						<el-button @click="closeChangePwdDialog()">取 消</el-button>
						<el-button type="primary" @click="submitChangePwdUserData()">确 定</el-button>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import axios from "axios";
	import api from '../../../api/PurchaseDelivery/index.js'
	export default {
		
		data() {
			return {
				imgUpload:`${api}/gamemall/upload/image`,
        		imageUrl: '',
				formLabelWidth: '6vw',
				extensionDataParamSpecial: {
					id: "",
					email:"",
					nickname: "",
					code: "",
					currentPage:1,
					pageSize:3,
					pageCount:10
				},
				ylTablData:[],
				insertUserDataParam:{},
				insertUserDialog: false,
				jiajiankuanUserDataParam:{},
				jiajiankuanDialog:false,
				frozenUserData:{},
				ChangePwdDialog:false,
				ChangePwdUserDataParam:{}
			}
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				this.insertUserDataParam.icon = res.data;
				console.log(this.insertUserDataParam.icon);
			},
			openInsertUser() {
				this.insertUserDialog =true;
			},
			closeInsertUserDialog(){
				this.insertUserDialog =false;
				this.insertUserDataParam = {};
				this.imageUrl='';
			},
			openJiajiankuanDialog(row){
				this.jiajiankuanUserDataParam = row;
				this.jiajiankuanUserDataParam.useId = this.jiajiankuanUserDataParam.id;
				this.jiajiankuanDialog = true;
			},
			closeJiajiankuanDialog(){
				this.jiajiankuanUserDataParam = {};
				this.jiajiankuanDialog = false;
			},
			handleCurrent(currentPage){
				this.extensionDataParamSpecial.currentPage = currentPage;
			},
			openChangePwdDialog(row){
				this.ChangePwdUserDataParam = row;
				this.ChangePwdUserDataParam.useId = this.ChangePwdUserDataParam.id;
				this.ChangePwdDialog = true;
			},
			closeChangePwdDialog(){
				this.ChangePwdUserDataParam = {};
				this.ChangePwdDialog = false;
			},
			SpecialSearch(){
				this.$axios.get(`${api}/gamemall/user/special`, this.extensionDataParamSpecial)
					.then(res => {
						if(res.obj==null || res.obj.list==null || res.obj.list.length === 0){
							this.extensionDataParamSpecial.currentPage = 1;
							this.extensionDataParamSpecial.pageCount = 0;
							this.ylTablData =[{},{}];
						}else{
							this.ylTablData = res.obj.list;
							this.extensionDataParamSpecial.pageCount = res.obj.pages;
						}
					})
					.catch(err => {
						// this.$message({
						// 	message: '请求异常',
						// 	type: 'warning'
						// })
					}
				);
			},
			submitInsertUserData(){
				this.insertUserDataParam.createdAdminId = localStorage.getItem('currentId');
				console.log(this.insertUserDataParam);

				this.$axios.post(`${api}/gamemall/user/insert`,this.insertUserDataParam)
					.then( res => {
					if(res.code === 200){
						this.insertUserDialog =false;
						this.$message({
							message: '用户添加成功',
							type: 'warning'
						});
						this.insertUserDataParam = {};
						this.SpecialSearch();
					}else if(res.code === 500){
						this.$message({
							message: '用户添加失败',
							type: 'warning'
						});
					}
					})
					.catch( err =>{
					// this.$message({
					//     message: err.msg || '操作失败',
					//     type: 'warning'
					//   })
					}
				);
			},
			submitJiaJianKuanUserData(){
				//Content-Type:application/x-www-form-urlencoded
				//this.$axios.axiosProperty.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
				this.jiajiankuanUserDataParam.createdAdminId = localStorage.getItem('currentId');
				this.jiajiankuanUserDataParam.userId = localStorage.getItem('currentId');
				this.jiajiankuanUserDataParam.useId = this.jiajiankuanUserDataParam.id;
				this.$axios.get(`${api}/gamemall/balance/update`,this.jiajiankuanUserDataParam)
					.then( res => {
					if(res.code === 200){
						this.jiajiankuanDialog =false;
						this.$message({
							message: '加减款成功',
							type: 'warning'
						});
						this.updateParam.useId = "";
						this.updateParam.nickname = "";
						this.updateParam.email = "";
						this.updateParam.code = "";
						this.updateParam.money = "";
						this.updateParam.msg = "";
						this.SpecialSearch();
					}else if(res.code === 500){
						this.$message({
							message: '加减款失败',
							type: 'warning'
						});
						this.SpecialSearch();
					}
					})
					.catch( err =>{
					// this.$message({
					//     message: err.msg || '操作失败',
					//     type: 'warning'
					//   })
					}
				);
			},
			submitChangePwdUserData(){
				if(this.ChangePwdUserDataParam.loginPwdBak1 == null || this.ChangePwdUserDataParam.loginPwdBak2 == null){
					this.$message({
						message: '密码不可为空',
						type: 'warning'
					});
					return;
				}
				if(this.ChangePwdUserDataParam.loginPwdBak1 != this.ChangePwdUserDataParam.loginPwdBak2){
					this.$message({
						message: '两次输入的密码不一致',
						type: 'warning'
					});
					return;
				}
				this.ChangePwdUserDataParam.loginPwd = this.ChangePwdUserDataParam.loginPwdBak1;
				this.ChangePwdUserDataParam.createdAdminId = localStorage.getItem('currentId');
				this.ChangePwdUserDataParam.userId = localStorage.getItem('currentId');
				this.$axios.post(`${api}/gamemall/user/update`,this.ChangePwdUserDataParam)
					.then( res => {
					if(res.code === 200){
						this.ChangePwdDialog =false;
						this.$message({
							message: '修改密码成功',
							type: 'warning'
						});
						this.ChangePwdUserDataParam = {};
						this.SpecialSearch();
					}else if(res.code === 500){
						this.$message({
							message: '修改密码失败',
							type: 'warning'
						});
						this.SpecialSearch();
					}
					})
					.catch( err =>{
					// this.$message({
					//     message: err.msg || '操作失败',
					//     type: 'warning'
					//   })
					}
				);
			},
			frozenUser(row){
				this.frozenUserData = row;
				this.frozenUserData.state = '0';

				this.frozenUserData.createdAdminId = localStorage.getItem('currentId');
				this.frozenUserData.userId = localStorage.getItem('currentId');
				this.$axios.post(`${api}/gamemall/user/update`,this.frozenUserData)
					.then( res => {
					if(res.code === 200){
						this.jiajiankuanDialog =false;
						this.$message({
							message: '冻结账号成功',
							type: 'warning'
						});
						this.frozenUserData = {};
						this.SpecialSearch();
					}else if(res.code === 500){
						this.$message({
							message: '冻结账号失败',
							type: 'warning'
						});
						this.SpecialSearch();
					}
					})
					.catch( err =>{
					// this.$message({
					//     message: err.msg || '操作失败',
					//     type: 'warning'
					//   })
					}
				);
			}
		},
		created() {
			this.SpecialSearch();
		},
	}
</script>

<style scoped>
	.content {
		width: 99%;
		height: 99%;
		margin-left: 0.5%;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		border-radius: 0.325rem;
	}

	.inpt_in {
		margin-top: 3%;
	}

	.boder {
		width: 98%;
		height: 75%;
		border: 1px solid #EBEEF5;
		margin-top: 2%;
		margin-left: 1%;
	}

	.size {
		font-size: 0.8rem;
		color: #606266;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 130px;
		height: 130px;
		line-height: 130px;
		text-align: center;
		border: 1px solid;
	}
	.avatar {
		width: 130px;
		height: 130px;
		display: block;
	}
</style>
